<template>
	<view>
		<!-- 导航栏 -->
		<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
			<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
				<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
				<view class="text">
					<text class="sup">纯碱2401</text>
					<view class="sub">
						<text>{{quoteData.code}}</text>
						<image src="@/static/price/subprice/n1.png"></image>
						<image src="@/static/price/subprice/n2.png"></image>
					</view>
				</view>
				<view class="item">
					<image src="@/static/price/subprice/collect.png"></image>
					<image src="@/static/home/search.png"></image>
				</view>
			</view>
		</view>
		<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="{use:false}">
			<view class="top-fix">
				<view class="flex-tol">
					<view class="col">
						<view class="sup">{{quoteData.price}}</view>
						<view class="sub"><text>{{quoteData.increase}}</text><text>{{quoteData.ratio}}</text></view>
					</view>
					<view class="col">
						<view class="sup">
							<text class="lab">最高</text>
							<text class="cl-red">{{quoteData.high}}</text>
						</view>
						<view class="sub">
							<text class="lab">最低</text>
							<text>{{quoteData.low}}</text>
						</view>
					</view>
					<view class="col">
						<view class="sup">
							<text class="lab">昨结</text>
							<text>{{quoteData.preSettlement}}</text>
						</view>
						<view class="sub">
							<text class="lab">持仓</text>
							<text>{{quoteData.volume}}</text>
						</view>
					</view>
					<view class="col">
						<view class="sup">
							<text class="lab">量</text>
							<text>{{quoteData.volume}}</text>
						</view>
						<view class="sub">
							<text class="lab">日增</text>
							<text>{{quoteData.dayAdd}}</text>
						</view>
					</view>
				</view>
				<view class="tips-box">
					<view class="left">
						<view class="group">
							<image src="@/static/price/subprice/big_bill.png"></image>
							<text>提醒</text>
						</view>
						<view class="date">14:59:58</view>
						<view class="shou">
							<text>空平</text>
							<text>221手</text>
						</view>
					</view>
					<image class="icon-right" src="@/static/home/arrow-right.png"></image>
				</view>
			</view>
			<view class="qiun-charts-box">
				<view class="tr-box">
					<view class="tl" :class="{'active':index==chartIndex}" @click="clicktl(index)"
						v-for="(item,index) in navlist">
						<text>{{item.name}}</text>
						<view class="drop">
							<!-- <view class="icn-top"></view> -->
						</view>
					</view>
					<view class="tl more" :class="{'active':6==chartIndex}">
						<text @click="ismore=!ismore">{{dropdownOptions[dropdownOptionsIndex].text}}</text>
						<view class="drop">
							<view class="icn-top"></view>
						</view>
						<cover-view :hidden="!ismore" class="drop-box">
							<cover-view class="li" v-for="(item,index) in dropdownOptions" :key="index"
								@click="switchDropdown(index)">{{item.text}}</cover-view>
							<!-- <cover-view class="li">10秒</cover-view>
							<cover-view class="li">周K</cover-view>
							<cover-view class="li set" @click="cycleSet">设置</cover-view> -->
						</cover-view>
					</view>
					<image class="set-gray dian" @click="cycleSet" src="@/static/price/subprice/set_gray.png"></image>
				</view>
				<!-- 日K 图表 -->
				<view v-if='chartIndex !==0 && chartIndex !==2' class="flex-box">
					<view class="qiun-charts-fix">
						<view class="axistitle rkaxistitle">
							<view class="kdj"><text>裸K</text><text>＞</text></view>
							<view class="k"><text>2023/11/06</text><text>日线</text></view>
						</view>
						<view class="qiun-charts" style="height:624rpx">
							<l-echart ref="candleChart" @finished="candleInit"></l-echart>
						</view>
						<view class="axistitle cjaxistitle">
							<view class="kdj"><text>成交/持仓</text></view>
							<view class="txt">成交量:103.50万</view>
							<view class="txt">持仓量:93.66万</view>
						</view>
						<view class="qiun-charts" style="height:278rpx">
							<l-echart ref="mixChart" @finished="mixInit"></l-echart>
						</view>
					</view>
					<view class="right-box">
						<view class="f1-box">
							<view class="yd-box">
								<view class="li active">一档</view>
								<view class="li dian">量价</view>
							</view>
						</view>
						<view class="qiun-charts" style="height:608rpx;width:100%">
							<l-echart ref="barChart" @finished="barInit"></l-echart>
						</view>
						<view class="info-box">
							<view class="bili-box">
								<view class="left">
									<view class="sup"><text>多</text><text>51.1%</text></view>
									<view class="line"></view>
								</view>
								<view class="right">
									<view class="sup"><text>49.9%</text><text>空</text></view>
									<view class="line"></view>
								</view>
							</view>
							<view class="icon-box">
								<view class="li active">
									<image src=""></image>
								</view>
								<view class="li">
									<image src=""></image>
								</view>
								<view class="li">
									<image src=""></image>
								</view>
							</view>
							<view class="scope-fix">
								<view class="labs">数据范围</view>
								<view class="scope-box">
									<view class="li active">当日</view>
									<view class="li">可见范围</view>
								</view>
								<view class="labs">价值区域</view>
								<view class="scope-box">
									<view class="li active">当日</view>
									<view class="li">可见范围</view>
								</view>
							</view>
							<view class="explain">维科夫量价说明</view>
						</view>
					</view>
				</view>
				<!-- 分时 图表 -->
				<view v-else class="flex-box">
					<view class="qiun-charts-fix">
						<view class="qiun-charts">
							<l-echart ref="lineChart" @finished="lineInit"></l-echart>
						</view>
						<view class="axistitle">
							<view class="kdj"><text>KDJ</text><text>＞</text></view>
							<view class="k"><text>(9,3,3)</text><text>K:61.11</text></view>
							<view class="d">D:71.74</view>
						</view>
						<view class="qiun-charts" style="height:278rpx">
							<l-echart ref="linesChart" @finished="linesInit"></l-echart>
						</view>
					</view>
					<view class="right-box">
						<view class="f1-box">
							<view class="yd-box">
								<view class="li active">一档</view>
								<view class="li dian">量价</view>
							</view>
							<view class="upgrade">
								<text>升级L2看五档</text>
								<image src="@/static/home/subpage/icn_blue.png"></image>
							</view>
							<view class="col-box">
								<view class="li">
									<view class="col">卖1</view>
									<view class="col">1788</view>
									<view class="col">139</view>
								</view>
								<view class="li">
									<view class="col">卖1</view>
									<view class="col">1788</view>
									<view class="col">139</view>
								</view>
							</view>
						</view>
						<view class="f2-box">
							<view class="make">成交明细</view>
							<view class="make-box">
								<view class="li" v-for="(item,index) in 5">
									<view class="row">
										<view class="lab-box">
											<view class="lab">多平</view>
											<view class="num">-22</view>
										</view>
									</view>
									<view class="row">
										<view class="date">14:59</view>
										<view class="lab-box">
											<view class="lab">1787</view>
											<view class="num">0</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="make-more" @click="makemore">更多明细..</view>
					</view>
				</view>
				<!-- 日K 资讯 -->
				<view :hidden="chartIndex!=1">
					<view class="nav-fix">
						<view class="tl" :class="{'active':index==rkIndex}" @click="clickrk(index)"
							v-for="(item,index) in rknavlist">
							<text>{{item.name}}</text>
							<view class="drop">
								<view class="icn-top"></view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view :hidden="rkIndex!=0" class="group-box">
						<view class="row" v-for="(item,index) in 5" @click="hotDetail">
							<view class="left">
								<view class="title">[活跃度] 11月3日商品期货活跃度</view>
								<view class="title">排行榜: 原油、燃油、沪锡位列前三</view>
								<view class="date">
									<text>2023-11-3 11:25:25</text>
									<text class="yellow-bg">沪锡</text>
									<text class="blue-bg">原油</text>
								</view>
							</view>
							<image class="cover" src="@/static/home/headBG.png"></image>
						</view>
					</view>
					<view :hidden="rkIndex!=1" class="group-box" style="padding:0 0 32rpx">
						<view class="community" v-for="(item,index) in 2">
							<view class="avatar">
								<view class="left">
									<image src='@/static/logo.png'></image>
									<view class="name">
										<view class="sup">用户名</view>
										<view class="sub">一天前发布</view>
									</view>
								</view>
								<view class="follow">关注</view>
							</view>
							<view class="title">标题名称</view>
							<view class="remark">
								<text>
									这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里是评价，这里.......
								</text>
								<text class='fullText'>[全文]</text>
							</view>
							<view class="comment">
								<view class="rows" v-for="(item,index) in 3">
									<text class="lab">用户名:</text>
									<text>内容内容内容内容内容内容内容内容内容内容</text>
								</view>
								<view class="allpl">查看全部14条评论</view>
							</view>
							<view class="com-fix">
								<view class="fix">
									<image src="@/static/price/subprice/icn_msg.png"></image>
									<text>202</text>
								</view>
								<view class="fix-box">
									<view class="fix">
										<image src="@/static/price/subprice/icn_like.png"></image>
										<text>202</text>
									</view>
									<view class="fix">
										<image src="@/static/price/subprice/icn_collect.png"></image>
										<text>202</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view :hidden="rkIndex!=2" class="group-box" style="padding:0 0 32rpx">
						<view class="table">
							<view class="th">
								<view class="tl">时间</view>
								<view class="tl">价位</view>
								<view class="tl">现手</view>
								<view class="tl">增仓</view>
								<view class="tl">开平</view>
							</view>
							<view class="tr" v-for="(item,index) in 10">
								<view class="tl">10:38:25</view>
								<view class="tl cl-red">2513</view>
								<view class="tl" :class="{'cl-green': index==2}">3800</view>
								<view class="tl cl-red">150</view>
								<view class="tl" :class="{'cl-green': index==2,'cl-red': index!=2}">多换</view>
							</view>
						</view>
					</view>
					<view :hidden="rkIndex!=3" class="group-box" style="padding:24rpx 20rpx 24rpx">
						<view class="rknav-fix">
							<view class="li" :class="{'active': rknavIndex==0}" @click="rknavcl(0)">产业链</view>
							<view class="li" :class="{'active': rknavIndex==1}" @click="rknavcl(1)">外盘品种</view>
						</view>
						<view :hidden="rknavIndex!=0" class="fix-box">
							<image src="" mode="widthFix" style="width:100%">产业链图片</image>
						</view>
						<view :hidden="rknavIndex!=1" class="fix-box">
							<view class="table">
								<view class="th">
									<view class="tl">品种合约</view>
									<view class="tl">最新</view>
									<view class="tl">涨跌幅</view>
								</view>
								<view class="tr" v-for="(item,index) in 10">
									<view class="tl">轻质原油主连</view>
									<view class="tl" :class="{'cl-green': index==2,'cl-red': index!=2}">479</view>
									<view class="tl" :class="{'cl-green': index==2,'cl-red': index!=2}">+0.08%</view>
								</view>
							</view>
						</view>
					</view>
					<view :hidden="rkIndex!=4" class="group-box" style="padding:0">
						<view class="bodys">
							<view class="hot-title">
								<view class="left">
									<view class="title-text">持仓量汇总</view>
								</view>
							</view>
							<view class="info-box">
								<view class="date">
									<text>数据时间11-7</text>
									<!-- <text>看当日排行</text> -->
								</view>
								<view class="fix-box">
									<view class="tab">
										<image src="@/static/home/subpage/charts5.png"></image>
										<text>净持仓数值</text>
										<text>7386</text>
									</view>
									<view class="tab">
										<image src="@/static/home/subpage/charts2.png"></image>
										<text>收盘价</text>
										<text>1755</text>
									</view>
									<view class="tab">
										<image src="@/static/home/subpage/charts6.png"></image>
										<text>增减变化 </text>
										<text>8</text>
									</view>
								</view>
							</view>
							<view class="qiun-charts-box">
								<view class="legend">
									<text>净持仓数据</text>
									<text>收盘价</text>
								</view>
								<view v-if="rkIndex==4" class="qiun-charts" style="width:100%;height:276rpx">
									<l-echart ref="phlineChart" @finished="phlineInit"></l-echart>
								</view>
							</view>
							<slider-range :value="[30, 90]" :min="5" :max="200" :step="5" height="20" :bar-height="7"
								:block-size="16" background-color="#fff" active-color="#EAF0FD" :format="format"
								:tipVisible="false" :decorationVisible="true"
								@change="handleRangeChange"></slider-range>
						</view>
						<view class="line"></view>
						<view class="navbar-box">
							<view class="box">
								<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">多单持仓</view>
								<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">空单持仓</view>
								<view class="li" :class="{'active':navfixIndex==2}" @click="navfix(2)">净持仓</view>
								<view class="li" :class="{'active':navfixIndex==3}" @click="navfix(3)">成交量</view>
							</view>
						</view>
						<view class="table-box">
							<view class="tables">
								<view class="tr">
									<view class="tl">品种合约</view>
									<view class="tl">
										<text>净持仓</text>
										<view class="drop">
											<view class="icn-top"></view>
											<view class="icn-bottom icn-red"></view>
										</view>
									</view>
									<view class="tl">
										<text>增减</text>
										<view class="drop">
											<view class="icn-top"></view>
											<view class="icn-bottom"></view>
										</view>
									</view>
								</view>
								<view class="box">
									<view class="rows" v-for="(item,index) in 5">
										<view class="flex">
											<view class="tl" @click="varietyInfo(index)">
												<text>纯碱</text>
												<image :hidden="index==varietyIndex"
													src="@/static/home/subpage/drop-gray.png"></image>
												<image :hidden="index!=varietyIndex"
													src="@/static/home/subpage/up-gray.png"></image>
											</view>
											<view class="tl">58343</view>
											<view class="tl" :class="{'cl-green':index==1}">479</view>
										</view>
										<view class="drop-box" :hidden="index!=varietyIndex">
											<view class="col" v-for="(item,index) in 4">
												<view class="li">纯碱2401</view>
												<view class="li">58343</view>
												<view class="li">58343</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view :hidden="rkIndex!=5" class="group-box" style="padding:0">
						<view class="relation-box">
							<view class="caption">
								<view class="left">
									<text>供需关系</text>
									<text>紧缺</text>
								</view>
								<view class="right">
									<text>详情</text>
									<image src="@/static/home/subpage/icn_right.png"></image>
								</view>
							</view>
							<view class="text"><text>2023年10月甲醇供需缺口20.4万吨 (2022年10月同期供需缺口18.4万吨)，年内累计供需盈余14.8万吨。</text>
							</view>
							<view class="date">2023-09-22</view>
						</view>
						<view class="line"></view>
						<view class="bodys">
							<view class="info-box" style="margin-top:0">
								<view class="date">
									<text>数据时间11-7</text>
									<!-- <text>看当日排行</text> -->
								</view>
								<view class="fix-box">
									<view class="tab">
										<image src="@/static/home/subpage/charts13.png"></image>
										<text>供需盈余/缺口(万吨</text>
									</view>
									<view class="tab">
										<image src="@/static/home/subpage/charts3.png"></image>
										<text>甲醇涨跌幅</text>
									</view>
								</view>
							</view>
							<view class="qiun-charts-box">
								<view class="legend">
									<text>手</text>
									<text>元</text>
								</view>
								<view v-if="rkIndex==5" class="qiun-charts" style="height:288rpx">
									<l-echart ref="jbmmixChart" @finished="jbmmixInit"></l-echart>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view :style="'height:calc(128rpx - '+botOperateBut+'px)'"></view>
		<view class="bottom-fix" :style="{'padding-bottom':botOperateBut+'px'}">
			<view class="fix-box">
				<view class="btns" @click="getorder">下单</view>
				<view class="icon-right-box">
					<view class="item">
						<image src="@/static/price/subprice/b-f1.png"></image>
						<view class="sub">交易</view>
					</view>
					<view class="item">
						<image src="@/static/price/subprice/b-f2.png"></image>
						<view class="sub">预警</view>
					</view>
					<view class="item">
						<image src="@/static/price/subprice/b-f3.png"></image>
						<view class="sub">画线</view>
					</view>
					<view class="item">
						<image src="@/static/price/subprice/b-f4.png"></image>
						<view class="sub">走势预测</view>
					</view>
					<view class="item">
						<view class="dian-box">
							<text></text><text></text><text></text>
						</view>
						<view class="sub">交易</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下单 -->
		<view class="order-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!isorder"></view>
			<view class="order-box-fix" :animation="animationData">
				<view class="caption">
					<view class="account" @click="getaccount">
						<view class="left">
							<view class="name">同花顺模拟</view>
							<view class="sub">
								<image src="@/static/price/subprice/mni.png"></image>
								<text>****0455</text>
							</view>
						</view>
						<image class="icn-drop-bottom" src="@/static/home/subpage/drop-gray.png"></image>
					</view>
					<image @click="closeorder" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="bodys">
					<view class="item-box">
						<view class="item">
							<view class="top">0.96%</view>
							<view class="box">
								<view class="left">-</view>
								<view class="center">对手价</view>
								<view class="right">+</view>
							</view>
							<view class="bottom">
								<view class="lab-box">
									<view class="lab">涨停:</view>
									<view class="text">1837</view>
								</view>
								<view class="lab-box">
									<view class="lab">跌停:</view>
									<view class="text">1503</view>
								</view>
							</view>
						</view>
						<view class="item">
							<view class="top">
								<text>1手保证金约</text>
								<text>5058.00</text>
							</view>
							<view class="box">
								<view class="left">-</view>
								<view class="center">手数</view>
								<view class="right">+</view>
							</view>
							<view class="bottom">
								<view class="lab-box">
									<view class="lab">最大可开仓手数约:</view>
									<view class="text">197</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom-btns">
						<view class="btns" @click="getorderAffirm">
							<view class="sup">下单</view>
							<view class="sub">买多</view>
						</view>
						<view class="btns">
							<view class="sup">1686</view>
							<view class="sub">卖空</view>
						</view>
						<view class="btns">
							<view class="sup">无持仓</view>
							<view class="sub">平仓</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下单 确认-->
		<view class="order-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!isorderAffirm"></view>
			<view class="order-box" :animation="animation1Data">
				<view class="caption">
					<image @click="" class="icn-left" src="@/static/price/subprice/icn_left.png"></image>
					<text>XXX2041买多</text>
					<image @click="closeorderAffirm" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="bodys">
					<view class="sup-box">
						<view class="item">
							<view class="sup">
								<image src="@/static/price/subprice/currency.png"></image>
								<text>价格</text>
							</view>
							<view class="sub">1687</view>
						</view>
						<view class="item">
							<view class="sup">
								<image src="@/static/price/subprice/snum.png"></image>
								<text> 手数</text>
							</view>
							<view class="sub">2</view>
						</view>
					</view>
					<view class="tips">请确认是否继续以上委托?</view>
					<view class="affirm-btn">确认买多</view>
				</view>
			</view>
		</view>
		<!-- 切换账号 -->
		<view class="account-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!isaccount"></view>
			<view class="account-box" :animation="animation2Data">
				<view class="caption">
					<view class="text">
						<image src="@/static/logo.png"></image>
						<view class="info">
							<view class="name">同花顺模拟</view>
							<view class="sub">****0455</view>
						</view>
					</view>
					<image @click="closeaccount" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="info-box">
					<view class="list" v-for="(item,index) in 2">
						<view class="left">
							<image src="@/static/logo.png"></image>
							<view class="info">
								<view class="name">同花顺模拟</view>
								<view class="sub">****0455</view>
							</view>
						</view>
						<image :hidden="accountIndex==index" src="@/static/price/check_no.png"></image>
						<image :hidden="accountIndex!=index" src="@/static/price/check_red.png"></image>
					</view>
				</view>
				<view class="set-btns">
					<view class="btns" @click="addAccount">添加账号</view>
					<view class="btns">账号管理</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as echarts from '@/utils/echarts.min.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				code: '',
				botOperateBut: 0,
				animationData: {},
				animation1Data: {},
				animation2Data: {},
				animation: {},
				chartIndex: 0,
				rkIndex: 0,
				rknavIndex: 1,
				navfixIndex: 2,
				varietyIndex: -1,
				lineOption: {},
				linesOption: {},
				candleOption: {},
				barOption: {},
				mixOption: {},
				phlineOption: {},
				jbmmixOption: {},
				rangeValue: [0, 0],
				isorder: false,
				isorderAffirm: false,
				isaccount: false,
				accountIndex: 0,
				ismore: false,
				navlist: [{
					name: '分时',
					id: 0
				}, {
					name: '日K',
					id: 1
				}, {
					name: '1分',
					id: 2
				}, {
					name: '5分',
					id: 3
				}, {
					name: '15分',
					id: 4
				}, {
					name: '30分',
					id: 5
				}],
				dropdownOptionsIndex: 0,
				dropdownOptions: [{
					text: '5秒',
				}, {
					text: '10秒',
				}, {
					text: '周K',
				}, {
					text: '设置',
				}, ],
				rknavlist: [{
					name: '资讯',
					id: 0
				}, {
					name: '社区',
					id: 1
				}, {
					name: '成交',
					id: 2
				}, {
					name: '关联',
					id: 3
				}, {
					name: '排行',
					id: 4
				}, {
					name: '基本面(f10)',
					id: 5
				}, {
					name: '仓单',
					id: 5
				}],
				quoteData: {},
				// 日K数据
				dayDate: [],
				// 日k时间
				dailyK: [],
				weekK: [],
				moonK: [],
				// 时分数据
				timeDivision: [],
				// 5分钟K线数据
				fiveMinutes: [],
			};
		},
		onLoad(options) {
			console.log('页面参数', options)
			if (options.code) {
				this.code = options.code
				this.getContract()
				// this.getQuoteKLine()
				this.getQuoteMinute()
			}

		},
		onReady() {
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation = animation;
		},
		methods: {
			// 点击更多下拉选项
			switchDropdown(i) {
				this.ismore = false
				if (i === 3) {
					console.log(i)
					return this.cycleSet()
				}
				this.chartIndex = this.navlist.length
				this.dropdownOptionsIndex = i
				this.clicktl(6)
			},
			// 获取交易所的期货数据的分时数据
			getContract() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.getQuoteData,
					method: 'get',
					data: {
						quote: this.code,
					},
					successCb: (res) => {
						uni.hideLoading();
						this.quoteData = res.data
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 交易所期货日K线、周K线、月K线
			getQuoteKLine() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.getQuoteKLine,
					method: 'get',
					data: {
						quote: this.code,
						// quote: 'SP2406',
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res.data.data)
						let dayDate = []
						let data = []
						if(this.chartIndex === 1) {
							data = res.data.data[0]
						} else if(this.chartIndex === 6) {
							data = res.data.data[1]
						}
						let dailyK = data.slice(-28).map(item => {
							dayDate.push(item.day)
							return [item.open, item.close, item.low, item.high]
						})
						this.dailyK = dailyK
						this.dayDate = dayDate

						this.candleInit()
						// dailyK: [],
						// weekK: [],
						// moonK: [],
						// this.quoteData = res.data
						// this.contract = res.rows.map(item => {
						// 	return {
						// 		...item,
						// 		isSelect: false,
						// 		isRise: (item.ratio.indexOf('-') == -1)
						// 	}
						// })
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			lineInit() {
				let base = new Date(new Date().toLocaleDateString()).getTime();
				let bxs = 1800 * 1000;
				let date = []; //X轴数据
				let data = [Math.random() * 300]; //随机生成线数据
				let linedata = [];
				for (let i = 1; i < 48; i++) {
					var now = new Date((base += bxs));
					date.push([now.getHours(), now.getMinutes()].join(':'));
					data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
					if ((i - 1) % 8 == 0 || i == 47) {
						linedata.push([
							[now.getHours(), now.getMinutes()].join(':'), Math.round((Math.random() - 0.5) * 20 +
								data[i - 1])
						]);
					}
				}
				this.lineOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '0',
						left: '0',
						top: '0',
						bottom: '20',
						// containLabel: true
					},
					xAxis: [{
						type: 'time',
						// data: date,
						// show:false,
						boundaryGap: false,
						splitNumber: 4,
						axisLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
							}
						},
						axisTick: {
							show: false,
							// alignWithLabel:false
						},
						axisLabel: {
							color: 'rgba(0,0,0,0.6)',
							fontSize: 12,
							align: 'left',
							margin: 10,
							hideOverlap: true,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
								width: '2'
							}
						},
					}],
					yAxis: [{
						type: 'value',
						show: false,
						max: function(value) {
							return value.max * 1.15;
						}
					}, ],
					series: [{
							// name: '净持仓数据',
							type: 'line',
							yAxisIndex: 0,
							data: this.timeDivision,
							symbol: 'none',
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#356FE5'
									},
									{
										offset: 1,
										color: '#ffffff'
									}
								]),
							},
							itemStyle: {
								color: '#356FE5'
							},
							lineStyle: {
								width: 2
							},
						}
						// ,
						// {
						// 	name: '持仓均价',
						// 	type: 'line',
						// 	yAxisIndex: 0,
						// 	data: linedata,
						// 	symbol: 'none',
						// 	itemStyle: {
						// 		color: '#FFA200'
						// 	},
						// 	lineStyle: {
						// 		width: 2
						// 	},
						// }
					]
				}
				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(this.lineOption);
				});
			},
			linesInit() {
				let base = new Date(new Date().toLocaleDateString()).getTime();
				let bxs = 1800 * 1000;
				let date = []; //X轴数据
				let data1 = [Math.random() * 300]; //随机生成线1数据
				let data2 = [Math.random() * 300]; //随机生成线2数据
				let data3 = [Math.random() * 300]; //随机生成线3数据
				for (let i = 1; i < 48; i++) {
					var now = new Date((base += bxs));
					date.push([now.getHours(), now.getMinutes()].join(':'));
					data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
					data2.push(Math.round((Math.random() - 0.5) * 20 + data2[i - 1]));
					data3.push(Math.round((Math.random() - 0.5) * 20 + data3[i - 1]));
				}
				this.linesOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '0',
						left: '0',
						top: '0',
						bottom: '20',
						// containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: date,
						// show:false,
						boundaryGap: false,
						splitNumber: 4,
						axisLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
							}
						},
						axisTick: {
							show: false,
							// alignWithLabel:false
						},
						axisLabel: {
							color: 'rgba(0,0,0,0.6)',
							fontSize: 12,
							align: 'left',
							margin: 10,
							hideOverlap: true,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
								width: '2'
							}
						},
					}],
					yAxis: [{
						type: 'value',
						show: false,
					}, ],
					series: [{
							name: '持仓均价',
							type: 'line',
							yAxisIndex: 0,
							data: data1,
							symbol: 'none',
							itemStyle: {
								color: '#FFA200'
							},
							lineStyle: {
								width: 2
							},
						},
						{
							name: '持仓均价',
							type: 'line',
							yAxisIndex: 0,
							data: data2,
							symbol: 'none',
							itemStyle: {
								color: '#33C45B'
							},
							lineStyle: {
								width: 2
							},
						},
						{
							name: '持仓均价',
							type: 'line',
							yAxisIndex: 0,
							data: data3,
							symbol: 'none',
							itemStyle: {
								color: '#FFA200'
							},
							lineStyle: {
								width: 2
							},
						}
					]
				}
				this.$refs.linesChart.init(echarts, chart => {
					chart.setOption(this.linesOption);
				});
			},
			candleInit() {
				let data = [];
				if (this.chartIndex === 1) {
					// 日k
					data = this.dailyK
				} else if (this.chartIndex === 3) {
					// 5分钟K
					data = this.fiveMinutes
				} else if (this.chartIndex === 4) {
					// 15分钟K
					data = this.fiveMinutes
				} else if (this.chartIndex === 5) {
					// 30分钟K
					data = this.fiveMinutes
				} else if (this.chartIndex === 6) {
					if(this.dropdownOptionsIndex === 2) {
						// 周k
						data = this.dailyK
					}
				}
				// console.log(this.dayDate, data)
				this.candleOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						position: function(pos, params, dom, rect, size) {
							// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
							var obj = {
								top: 60
							};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
							return obj;
						}
					},
					grid: {
						right: '0',
						left: '5',
						top: '5',
						bottom: '45',
						// containLabel: true
					},
					xAxis: {
						type: 'category',
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
							}
						},
						axisLabel: {
							color: 'rgba(0,0,0,0.6)',
							fontSize: 12,
							align: 'left',
							margin: 20,
							hideOverlap: true,
							// inside: true,
							formatter: function (value, index) {
								// console.log(value.length)
								if(value.length === 19) {
									return value.substring(11, 16)
								} else if(value.length === 10) {
									return value.substring(5, 10)
								}else {
									return value;
								}
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#F4F5F7',
								width: '2'
							}
						},
						// data: ['09/05','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15','09/15']
						data: this.dayDate
					},
					yAxis: [{
						type: 'value',
						show: false,
						min: function(value) {
							// console.log('value', value)
							let num = (value.max - value.min) * 0.1 
							return value.min  - num;
						},
						max: function(value) {
							let num = (value.max - value.min) * 0.1 
							return value.max  + num;
						}
					}],
					series: [{
						type: 'candlestick',
						yAxisIndex: 0,
						barWidth: 7,
						itemStyle: {
							color0: '#33C45B',
							borderColor0: '#33C45B',
							color: '#ffffff',
							borderColor: '#EE5953',
						},
						data: data
						// [开盘值, 收盘值, 最低值, 最高值]
						// data: [
						// 	[200, 340, 100, 380],
						// 	[400, 250, 200, 500],
						// 	[200, 340, 100, 380],
						// 	[400, 250, 150, 500],
						// 	[200, 340, 100, 380],
						// 	[400, 350, 300, 500],
						// 	[200, 340, 100, 380],
						// 	[400, 350, 300, 500],
						// 	[200, 340, 100, 380],
						// 	[400, 350, 300, 500],
						// 	[200, 340, 100, 380],
						// 	[300, 250, 300, 500],
						// 	[200, 340, 100, 380],
						// 	[200, 340, 100, 380],
						// 	[300, 250, 300, 400],
						// 	[200, 200, 200, 200],
						// ]
					}, ]
				};
				if(this.$refs.candleChart) {
					this.$refs.candleChart.init(echarts, chart => {
						chart.setOption(this.candleOption);
					});
				}
				
			},
			barInit() {
				this.barOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						backgroundColor: '#474747',
						textStyle: {
							color: '#fff',
							fontSize: 12
						}
					},
					grid: {
						right: '10',
						left: '0',
						top: '0',
						bottom: '0',
						// containLabel: true
					},
					xAxis: {
						type: 'value',
						axisTick: {
							show: false,
							alignWithLabel: true,
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false,
							margin: 10,
						},
						splitLine: {
							lineStyle: {
								color: '#F6F7F9'
							}
						}
					},
					yAxis: {
						type: 'category',
						position: 'left',
						alignTicks: true,
						inverse: true,
						data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#F6F7F9'
							}
						},
						axisLabel: {
							show: false,
							formatter: '{value}',
							color: 'rgba(0,0,0,0.8)',
							fontSize: 12
						},
					},
					series: [{
							// name: '净持仓增减变化',
							type: 'bar',
							stack: 'total',
							barWidth: '8',
							data: [{
									value: 1770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 7770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 1770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 6770,
									// label:{show: true},
								},
								{
									value: 7770,
									label: {
										show: true
									},
								},
								6770, 1770, 7770, 7770, 1770
							],
							itemStyle: {
								color: '#33C45B'
							},
							labelLine: {
								show: true,
								lineStyle: {
									color: 'rgba(0,0,0,0.4)'
								}
							},
							label: {
								color: '#ffffff',
								backgroundColor: '#33C45B',
								borderRadius: 3,
								padding: [2, 3, 2, 3],
								fontSize: 10,
								position: 'right',
								distance: 8,
								formatter: '{c}'
							}
						},
						{
							// name: '净持仓增减变化',
							type: 'bar',
							stack: 'total',
							barWidth: '8',
							data: [{
									value: 1770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 7770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 1770,
									itemStyle: {
										opacity: 0.4
									},
								},
								{
									value: 6770,
									label: {
										show: true
									},
								},
								0, 6770, 1770, 7770, 7770, 1770
							],
							itemStyle: {
								color: '#FF3B30'
							},
							labelLine: {
								show: true,
								lineStyle: {
									color: 'rgba(0,0,0,0.4)'
								}
							},
							label: {
								color: '#ffffff',
								backgroundColor: '#FF3B30',
								borderRadius: 3,
								padding: [2, 3, 2, 3],
								fontSize: 10,
								position: 'right',
								distance: 8,
								formatter: '{c}'
							}
						}
					]
				}
				this.barHeight = this.barOption.yAxis.data.length * 50;
				if(this.$refs.barChart) {
					this.$refs.barChart.init(echarts, chart => {
						chart.setOption(this.barOption);
					});
				}
				
			},
			mixInit() {
				this.mixOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '0',
						left: '0',
						top: '0',
						bottom: '0',
						// containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
					}],
					yAxis: [{
						type: 'value',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						splitLine: {
							lineStyle: {
								color: '#F4F5F7'
							}
						}
					}, ],
					series: [{
							type: 'bar',
							yAxisIndex: 0,
							barWidth: '7',
							data: [{
									value: 50,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								60,
								{
									value: 40,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								70,
								{
									value: 80,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								60,
								{
									value: 160,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								80,
								{
									value: 90,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								60,
								{
									value: 100,
									itemStyle: {
										color: '#33C45B',
										borderWidth: 0
									}
								},
								95,
							],
							itemStyle: {
								color: '#ffffff',
								borderColor: '#EE5953',
							}
						},
						{
							name: '多空比',
							type: 'line',
							yAxisIndex: 0,
							data: [100, 110, 120, 110, 130, 170, 100, 90, 160, 70, 60, 5, -5, -10],
							symbol: 'none',
							smooth: true,
							itemStyle: {
								color: '#33C45B'
							},
							lineStyle: {
								width: 2
							},
						},
						{
							name: '多空比',
							type: 'line',
							yAxisIndex: 0,
							data: [90, 100, 110, 90, 120, 160, 100, 80, 150, 60, 60, 5, -5, -10],
							symbol: 'none',
							smooth: true,
							itemStyle: {
								color: '#FFA200'
							},
							lineStyle: {
								width: 2
							},
						}
					]
				}
				if(this.$refs.mixChart) {
					this.$refs.mixChart.init(echarts, chart => {
						chart.setOption(this.mixOption);
					});
				}
				
			},
			phlineInit() {
				this.phlineOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '2',
						left: '0',
						top: '10',
						bottom: '10',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24',
							'2023-10-25', '2023-10-26', '2023-10-27'
						],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false,
						},
					}],
					yAxis: [{
							type: 'value',
							// name: '手',
							position: 'left',
							alignTicks: true,
							// offset: 80,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
						},
						{
							type: 'value',
							// name: '元',
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
							min: 1600
						}
					],
					series: [{
							name: '净持仓数据',
							type: 'line',
							yAxisIndex: 0,
							data: [4301, 17200, 4308, 15022, 4301, 17200, 4308, 15022],
							symbol: 'none',
							itemStyle: {
								color: '#0BDEC9'
							},
							lineStyle: {
								width: 2
							},
						},
						{
							name: '收盘价',
							type: 'line',
							yAxisIndex: 1,
							data: [1682, 1800, 1690, 1799, 1682, 1800, 1690, 1799],
							symbol: 'none',
							itemStyle: {
								color: '#356FE5'
							},
							lineStyle: {
								width: 2
							},
						}
					]
				}
				if(this.$refs.phlineChart) {
					this.$refs.phlineChart.init(echarts, chart => {
						chart.setOption(this.phlineOption);
					});
				}
				
			},
			jbmmixInit() {
				this.jbmmixOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '2',
						left: '0',
						top: '10',
						bottom: '2',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						// data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24', '2023-10-25','2023-10-26','2023-10-27'],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							margin: 10,
							formatter: function(value, index) {
								if (index == 0 || index == 12) return value;
							},
							showMinLabel: true,
							showMaxLabel: true,
						},
					}],
					yAxis: [{
							type: 'value',
							// name: '手',
							position: 'left',
							alignTicks: true,
							// offset: 80,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
						},
						{
							type: 'value',
							// name: '元',
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
							min: 1600
						}
					],
					series: [{
							name: '多单持仓',
							type: 'bar',
							yAxisIndex: 0,
							barWidth: '7',
							data: [
								["2023-10-20", 8858],
								["2023-10-2", 0],
								["2023-10-21", 13858],
								["2023-10-22", 12858],
								["2023-10-23", 14858],
								["2023-10-24", 10858],
								["2023-10-25", 10858],
								["2023-10-3", 0],
								["2023-10-4", 0],
								["2023-10-5", 0],
								["2023-10-26", 12858],
								["2023-10-28", 9858],
								["2023-10-29", 5000],
							],
							// connectNulls: true,
							itemStyle: {
								color: '#356FE5'
							}
						},
						{
							name: '持仓均价',
							type: 'line',
							yAxisIndex: 1,
							data: [
								["2023-10-21", 1662],
								["2023-10-22", 1715],
								["2023-10-24", 1663],
								["2023-10-26", 1716],
								["2023-10-29", 1710],
							],
							symbol: 'none',
							itemStyle: {
								color: '#FFA200'
							},
							lineStyle: {
								width: 2
							},
						}
					]
				}
				this.$refs.jbmmixChart.init(echarts, chart => {
					chart.setOption(this.jbmmixOption);
				});
			},
			format(val) {
				return val + '%'
			},
			handleRangeChange(e) {
				this.rangeValue = e;
				// console.log(this.rangeValue);
			},
			back() {
				uni.navigateBack();
			},
			makemore() {
				uni.navigateTo({
					url: '/pages/priceSubpage/makemore/makemore'
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
				setTimeout(() => {
					this.mescroll.endSuccess(9, false); // 加载成功
				}, 1500)
			},
			clicktl(index) {
				this.chartIndex = index;
				if (index === 0 || index === 2) {
					this.getQuoteMinute()
				} else if (index === 1) {
					this.getQuoteKLine()
				} else if(index === 3) {
					this.getQuoteFiveMinute(5)
				} else if(index === 4) {
					this.getQuoteFiveMinute(15)
				} else if(index === 5) {
					this.getQuoteFiveMinute(30)
				} else if(index === 6) {
					this.getQuoteKLine()
				}
			},
			// 交易所期货当天分时数据
			getQuoteMinute() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.getQuoteMinute,
					method: 'get',
					data: {
						quote: this.code,
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res)
						// .slice(0, 100)
						this.timeDivision = res.data.map(item => {
							return [item.date, item.price]
						})
						this.lineInit();
					},
					failCb(e) {
						uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 交易所期货获取5.15.30.60分时线
			getQuoteFiveMinute(minute) {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.getQuoteFiveMinute,
					method: 'get',
					data: {
						quote: this.code,
						minute: minute,
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res)
						let dayDate = []
						this.fiveMinutes = res.data.data.slice(-28).map(item => {
							// const date = new Date(item.time.replace(/\-/g, "/"));
							dayDate.push(item.time)
							return [item.open, item.close, item.low, item.high]
						})
						this.dayDate = dayDate
						this.candleInit()
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			clickrk(index) {
				this.rkIndex = index;
			},
			rknavcl(index) {
				this.rknavIndex = index;
			},
			navfix(index) {
				this.navfixIndex = index;
			},
			varietyInfo(index) {
				this.varietyIndex = this.varietyIndex == index ? -1 : index;
			},
			hotDetail() {
				uni.navigateTo({
					url: '/pages/homeSubpage/hotDetail/hotDetail'
				});
			},
			cycleSet() {
				this.ismore = false;
				uni.navigateTo({
					url: '/pages/priceSubpage/cycleSet/cycleSet'
				});
			},
			getorder() {
				this.isorder = true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closeorder() {
				this.isorder = false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			getorderAffirm() {
				this.isorderAffirm = true;
				this.animation.translateY(0).step();
				this.animation1Data = this.animation.export();
				this.closeorder();
			},
			closeorderAffirm() {
				this.isorderAffirm = false;
				this.animation.translateY("100%").step();
				this.animation1Data = this.animation.export();
			},
			getaccount() {
				this.isaccount = true;
				this.animation.translateY(0).step();
				this.animation2Data = this.animation.export();
				this.closeorder();
			},
			closeaccount() {
				this.isaccount = false;
				this.animation.translateY("100%").step();
				this.animation2Data = this.animation.export();
			},
			addAccount() {
				this.closeaccount();
				uni.navigateTo({
					url: '/pages/priceSubpage/addAccount/addAccount'
				});
			},
		}
	}
</script>

<style lang="scss">
	.cl-red {
		color: #FF3B30 !important;
	}

	.cl-green {
		color: #33C45B !important;
	}

	.dian::after {
		content: '';
		width: 12rpx;
		height: 12rpx;
		background: #FF3B30;
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		border-radius: 50%;
	}

	.header-fit-box {
		.header-fit {
			padding: 0 24rpx 0 10rpx;

			.text {
				.sup {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}

				.sub {
					display: flex;
					align-items: center;
					justify-content: center;

					& text {
						font-size: 20rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.4);
						padding-right: 4rpx;
					}

					& image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 4rpx;
					}
				}
			}

			.item {
				& image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 16rpx;
				}
			}
		}
	}

	.top-fix {
		padding: 0 24rpx;
		border-top: 2rpx solid #F6F7F9;

		.flex-tol {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 16rpx;

			.col {
				flex: 1;

				.lab {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.4);
					padding-right: 16rpx;
					width: 48rpx;
					text-align: right;
				}

				& text {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.sup {
					display: flex;
					align-items: center;
				}

				.sub {
					display: flex;
					align-items: center;
					margin-top: 18rpx;
				}
			}

			.col:first-child {
				.sup {
					font-size: 40rpx;
					font-weight: 800;
					color: #FF3B30;
				}

				.sub {
					margin-top: 8rpx;

					& text {
						font-size: 20rpx;
						color: #FF3B30;
					}

					& text:last-child {
						padding-left: 16rpx;
					}
				}
			}
		}

		.tips-box {
			height: 60rpx;
			background: #F4F5F7;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16rpx;
			margin-top: 22rpx;

			.left {
				display: flex;
				align-items: center;

				.group {
					display: flex;
					align-items: center;

					& image {
						width: 48rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					& text {
						font-size: 24rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.date {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					margin-left: 48rpx;
				}

				.shou {
					font-size: 24rpx;
					color: #FF3B30;
					margin-left: 32rpx;

					& text:last-child {
						padding-left: 16rpx;
					}
				}
			}

			.icon-right {
				width: 46rpx;
				height: 46rpx;
			}
		}
	}

	.qiun-charts-box {
		.tr-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			border-bottom: 2rpx solid #F4F5F7;
			height: 82rpx;
			box-sizing: border-box;

			.tl {
				display: flex;
				align-items: flex-end;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				height: 100%;
				box-sizing: border-box;

				& text {
					height: 100%;
					box-sizing: border-box;
					padding: 24rpx 0;
					position: relative;
				}

				.drop {
					position: relative;
					top: -22rpx;
					left: 8rpx;
					display: none;

					.icn-top {
						width: 0rpx;
						height: 0rpx;
						border: 9rpx solid transparent;
						border-bottom-color: #7899DE;
						border-bottom-width: 9rpx;
						margin-bottom: 0;
						transform: rotate(135deg);
					}
				}

				.drop-box {
					position: absolute;
					left: -70rpx;
					top: 76rpx;
					width: 192rpx;
					background: #FFFFFF;
					box-shadow: 0px 0 8rpx 2rpx rgba(0, 0, 0, 0.08);
					border-radius: 16rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					z-index: 1;

					.li {
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.8);
						border-bottom: 2rpx solid #F4F5F7;
					}

					.li:last-child {
						border-bottom: 0;
					}

					.li.set {
						color: #356FE5;
					}
				}
			}

			.tl.active {
				& text::after {
					content: '';
					width: 100%;
					height: 8rpx;
					background: #EE5953;
					border-radius: 4rpx;
					position: absolute;
					left: 0;
					bottom: 0;
				}

				.drop {
					display: block;
				}
			}

			.tl.more {
				position: relative;

				.drop {
					display: block;
				}
			}

			.set-gray {
				width: 64rpx;
				height: 64rpx;
				position: relative;
			}

			.dian::after {
				right: 16rpx;
				top: 12rpx;
			}
		}

		.flex-box {
			display: flex;

			.qiun-charts {
				width: 518rpx;
				height: 666rpx;
			}

			.axistitle {
				height: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 2rpx solid #F4F5F7;
				border-bottom: 2rpx solid #F4F5F7;
				margin-top: 16rpx;

				.kdj {
					width: 116rpx;
					height: 42rpx;
					background: #F4F5F7;
					border-radius: 4rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
				}

				.k {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					margin-left: 24rpx;

					& text:last-child {
						padding-left: 16rpx;
					}
				}

				.d {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #33C45B;
				}
			}

			.rkaxistitle {
				margin-top: 0;
				justify-content: flex-start;

				.kdj {
					color: rgba(0, 0, 0, 0.4);

					& text:first-child {
						color: rgba(0, 0, 0, 0.6);
					}
				}
			}

			.cjaxistitle {
				margin-top: 0;
				padding: 4rpx 0 2rpx;
				justify-content: flex-start;
				height: 40rpx;
				box-sizing: border-box;

				.kdj {
					font-size: 20rpx;
					line-height: 34rpx;
					height: 34rpx;
				}

				.txt {
					font-size: 20rpx;
					color: #FF3B30;
					padding-left: 16rpx;
					line-height: 34rpx;
				}

				.txt:last-child {
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.right-box {
				.f1-box {
					padding: 16rpx;
				}

				.f2-box {
					padding-left: 14rpx;
				}

				flex:1;
				overflow-y: auto;
				border-left: 2rpx solid #F4F5F7;

				.yd-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.li {
						width: 96rpx;
						height: 42rpx;
						border-radius: 4rpx;
						border: 2rpx solid #F4F5F7;
						text-align: center;
						line-height: 42rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						position: relative;
						box-sizing: border-box;
					}

					.li.active {
						color: #356FE5;
						background: rgba(53, 111, 229, 0.08);
					}
				}

				.upgrade {
					margin-top: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					& text {
						color: #356FE5;
						font-size: 20rpx;
					}

					& image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.col-box {
					margin-top: 16rpx;

					.li {
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.col {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF3B30;
						}

						.col:first-child {
							color: rgba(0, 0, 0, 0.4);
						}

						.col:last-child {
							color: rgba(0, 0, 0, 0.8);
						}
					}
				}

				.make {
					width: 200rpx;
					height: 42rpx;
					background: #EFF4FD;
					border-radius: 4rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.make-box {
					margin-top: 8rpx;

					.li {
						.date {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							flex: 1;
						}

						.row {
							display: flex;
							align-items: center;

							.lab-box {
								display: flex;
								align-items: center;
								justify-content: space-between;
								height: 100%;
								width: 148rpx;
								padding-right: 16rpx;
								padding-left: 8rpx;
								box-sizing: border-box;
							}

							.lab {
								font-size: 24rpx;
								font-weight: bold;
							}

							.num {
								font-size: 24rpx;
								font-weight: bold;
								color: rgba(0, 0, 0, 0.8);
							}
						}

						.row:first-child {
							justify-content: flex-end;
							height: 42rpx;

							.lab-box {
								background: #F4F5F7;
								border-radius: 4rpx;
							}

							.lab {
								color: #33C45B;
							}
						}

						.row:last-child {
							height: 50rpx;

							.lab {
								color: #FF3B30;
							}
						}
					}
				}

				.make-more {
					margin-top: 8rpx;
					text-align: center;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.info-box {
					padding: 14rpx 8rpx 24rpx;
					border-top: 2rpx solid #F4F5F7;

					.bili-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							width: 116rpx;

							.sup {
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.8);

								& text:last-child {
									color: #FF3B30;
									padding-left: 4rpx;
								}
							}

							.line {
								height: 8rpx;
								background: #EE5953;
								margin-top: 4rpx;
							}
						}

						.right {
							width: 98rpx;

							.sup {
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.8);
								text-align: right;

								& text:first-child {
									color: #33C45B;
									padding-right: 4rpx;
								}
							}

							.line {
								height: 8rpx;
								background: #33C45B;
								margin-top: 4rpx;
							}
						}
					}

					.icon-box {
						display: flex;
						align-items: center;
						width: 100%;
						height: 46rpx;
						background: #F4F5F7;
						border-radius: 8rpx;
						padding: 2rpx;
						box-sizing: border-box;
						margin-top: 8rpx;

						.li {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;

							& image {
								width: 38rpx;
								height: 18rpx;
							}
						}

						.li.active {
							background-color: #fff;
							border-radius: 6rpx;
						}
					}

					.scope-fix {
						margin-top: 8rpx;

						.labs {
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.4);
							margin-top: 16rpx;
						}

						.scope-box {
							margin-top: 8rpx;
							display: flex;
							align-items: center;
							width: 100%;
							height: 46rpx;
							background: #F4F5F7;
							border-radius: 8rpx;
							padding: 2rpx;
							box-sizing: border-box;

							.li {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: center;
								height: 100%;
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.4);
								text-align: center;
								line-height: 42rpx;
							}

							.li.active {
								background-color: #fff;
								border-radius: 6rpx;
								color: rgba(0, 0, 0, 0.8);
							}
						}

						.labs:first-child {
							margin-top: 8rpx;
						}
					}

					.explain {
						margin-top: 8rpx;
						font-size: 16rpx;
						color: rgba(0, 0, 0, 0.4);
					}
				}
			}
		}

		.nav-fix {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 46rpx 0 48rpx;
			border-top: 2rpx solid #F4F5F7;
			height: 82rpx;
			box-sizing: border-box;

			.tl {
				display: flex;
				align-items: flex-end;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				height: 100%;
				box-sizing: border-box;

				& text {
					height: 100%;
					box-sizing: border-box;
					padding: 24rpx 2rpx;
					position: relative;
				}

				.drop {
					position: relative;
					top: -22rpx;
					left: 8rpx;
					display: none;

					.icn-top {
						width: 0rpx;
						height: 0rpx;
						border: 9rpx solid transparent;
						border-bottom-color: #7899DE;
						border-bottom-width: 9rpx;
						margin-bottom: 0;
						transform: rotate(135deg);
					}
				}
			}

			.tl.active {
				& text::after {
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #EE5953;
					border-radius: 4rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					margin-left: -24rpx;
				}

				.drop {
					display: block;
				}
			}
		}

		.line {
			height: 16rpx;
			background: #F4F5F7;
		}

		.group-box {
			padding: 16rpx 32rpx 32rpx;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 16rpx 0;
				margin-top: 24rpx;

				.left {
					width: 436rpx;

					.title {
						font-size: 28rpx;
						color: #000000;
						line-height: 44rpx;
					}

					.date {
						margin-top: 24rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 48rpx;
						display: flex;
						align-items: center;

						& text:first-child {
							padding-right: 14rpx;
						}

						.yellow-bg {
							font-size: 20rpx;
							color: #FF9500;
							height: 32rpx;
							line-height: 32rpx;
							background: rgba(255, 149, 0, 0.08);
							border-radius: 4rpx;
							padding: 0 14rpx;
							margin-left: 16rpx;
						}

						.blue-bg {
							font-size: 20rpx;
							color: #356FE5;
							height: 32rpx;
							line-height: 32rpx;
							background: rgba(53, 111, 229, 0.04);
							border-radius: 4rpx;
							padding: 0 14rpx;
							margin-left: 16rpx;
						}
					}
				}

				.cover {
					width: 174rpx;
					height: 134rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
				}
			}

			.row:first-child {
				margin-top: 0;
			}

			.community {
				padding: 16rpx 32rpx 0;
				border-bottom: 2rpx solid #F4F5F7;

				.avatar {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						padding-left: 8rpx;

						& image {
							width: 82rpx;
							height: 82rpx;
							border-radius: 50%;
						}

						.name {
							margin-left: 14rpx;

							.sup {
								font-size: 32rpx;
								font-weight: bold;
								color: #333333;
								line-height: 48rpx;
							}

							.sub {
								font-size: 20rpx;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.4);
							}
						}
					}

					.follow {
						width: 144rpx;
						height: 56rpx;
						line-height: 56rpx;
						background: #EE5953;
						border-radius: 16rpx;
						text-align: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}

				.title {
					margin-top: 30rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.remark {
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					line-height: 48rpx;

					.fullText {
						color: #EE5953;
					}
				}

				.comment {
					margin-top: 24rpx;
					background: #F4F5F7;
					border-radius: 16rpx;
					padding: 24rpx;

					.rows {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						// line-height: 48rpx;
						margin-top: 16rpx;

						.lab {
							color: #356FE5;
						}
					}

					.rows:first-child {
						margin-top: 0;
					}

					.allpl {
						font-size: 20rpx;
						color: #356FE5;
						margin-top: 16rpx;
					}
				}

				.com-fix {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 28rpx 0 36rpx;

					.fix-box {
						display: flex;
						align-items: center;

						.fix:last-child {
							margin-left: 70rpx;
						}
					}

					.fix {
						display: flex;
						align-items: center;

						& image {
							width: 32rpx;
							height: 32rpx;
						}

						& text {
							padding-left: 8rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.4);
						}
					}
				}
			}

			.table {
				.th {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 78rpx;
					border-bottom: 2rpx solid #F6F7F9;
					box-sizing: border-box;
					padding: 0 48rpx 0 38rpx;

					.tl {
						text-align: center;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
					}
				}

				.tr {
					height: 82rpx;
					border-bottom: 2rpx solid #F6F7F9;
					box-sizing: border-box;
					padding: 0 44rpx 0 24rpx;
					display: flex;
					align-items: center;

					.tl {
						text-align: center;
						height: initial;
						display: block;
						font-size: 24rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.tl:nth-child(1) {
					text-align: left;
					width: 21%;
				}

				.tl:nth-child(2) {
					width: 21%;
				}

				.tl:nth-child(3) {
					width: 20%;
				}

				.tl:nth-child(4) {
					width: 19%;
				}

				.tl:nth-child(5) {
					text-align: right;
					width: 19%;
				}
			}

			.fix-box {
				.tl:nth-child(1) {
					width: 40%;
					text-align: left;
				}

				.tl:nth-child(2) {
					width: 30%;
				}

				.tl:nth-child(3) {
					width: 30%;
					text-align: right;
				}

				.th {
					padding: 0 10rpx 0 20rpx;
					height: 90rpx;
				}

				.tr {
					padding: 0 10rpx 0 20rpx;
					height: 88rpx;
					display: flex;
					align-items: center;

					.tl {
						font-size: 28rpx;
					}

					.tl:nth-child(1) {
						color: #356FE5;
					}
				}
			}

			.rknav-fix {
				height: 88rpx;
				background: #F4F5F7;
				border-radius: 16rpx;
				padding: 4rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.li {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.4);
				}

				.li.active {
					background: #FFFFFF;
					border-radius: 12rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.hot-title {
				padding-bottom: 26rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// margin-top:24rpx;
				.left {
					display: flex;
					align-items: center;

					.title-text {
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
						line-height: 46rpx;
					}

					& image {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.check {
					display: flex;
					align-items: center;

					& image {
						width: 46rpx;
						height: 46rpx;
					}

					& text {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.4);
					}
				}
			}

			.hot-title::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 60rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FF3B30 0%, rgba(255, 59, 48, 0) 100%);
			}

			.bodys {
				// border-bottom: 2rpx solid #F6F7F9;
				padding: 32rpx 24rpx 44rpx;

				.info-box {
					margin-top: 24rpx;
					padding: 24rpx 24rpx 16rpx;
					background: #F4F5F7;
					border-radius: 16rpx;

					.date {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.4);
						// & text:last-child{
						// 	font-size: 24rpx;
						// 	color: #356FE5;
						// }
					}

					.fix-box {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.tab {
							display: flex;
							align-items: center;
							width: 50%;
							margin-top: 8rpx;

							& image {
								width: 48rpx;
								height: 48rpx;
							}

							& text {
								font-size: 24rpx;
								color: rgba(0, 0, 0, 0.6);
							}

							& text:last-child {
								font-weight: bold;
								color: rgba(0, 0, 0, 0.8);
								padding-left: 8rpx;
							}
						}
					}
				}

				.qiun-charts-box {
					.legend {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						margin-top: 24rpx;
					}

					.qiun-charts {
						// width:654rpx;
						// height:318rpx;
						margin-top: 16rpx;
					}
				}
			}

			.navbar-box {
				padding: 24rpx;
				background-color: #fff;
				z-index: 3;
				position: relative;

				.box {
					display: flex;
					align-items: center;
					width: 100%;
					height: 80rpx;
					background: #F7F7F7;
					border-radius: 16rpx;
					padding: 4rpx;
					box-sizing: border-box;
				}

				.li {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					flex: 1;
					text-align: center;
					height: 100%;
					line-height: 72rpx;
				}

				.li.active {
					background-color: #fff;
					font-weight: bold;
					color: #EE5953;
					border-radius: 16rpx;
				}
			}

			.relation-box {
				padding: 32rpx 16rpx 32rpx 24rpx;

				.caption {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						& text {
							font-size: 32rpx;
							font-weight: bold;
							color: #000000;
						}

						& text:last-child {
							padding-left: 8rpx;
							color: #EE5953;
						}
					}

					.right {
						display: flex;
						align-items: center;

						& image {
							width: 46rpx;
							height: 46rpx;
						}

						& text {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.4);
						}
					}
				}

				.text {
					margin-top: 28rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.8);
					line-height: 56rpx;
				}

				.date {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
				}
			}
		}
	}

	.bottom-fix {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9;
		background: #FFFFFF;
		box-shadow: 0px 0 16rpx 2rpx rgba(51, 51, 51, 0.2);

		.fix-box {
			display: flex;
			align-items: center;
			padding: 24rpx 34rpx 24rpx 32rpx;

			.btns {
				width: 218rpx;
				height: 80rpx;
				background: #EE5953;
				border-radius: 8rpx;
				text-align: center;
				line-height: 80rpx;
				margin-right: 38rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.icon-right-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					& image {
						width: 48rpx;
						height: 48rpx;
					}

					.dian-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 48rpx;
						height: 48rpx;
						padding: 8rpx;
						box-sizing: border-box;

						& text {
							width: 8rpx;
							height: 8rpx;
							background: rgba(0, 0, 0, 0.4);
							border-radius: 50%;

						}
					}

					.sub {
						margin-top: 4rpx;
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.8);
						line-height: 28rpx;
					}
				}
			}
		}
	}

	.order-modal {
		.order-box-fix {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			overflow: hidden;

			.caption {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 122rpx;
				text-align: center;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				border-bottom: 2rpx solid #F6F7F9;
				box-sizing: border-box;
				padding-left: 32rpx;

				.account {
					display: flex;
					align-items: center;

					.left {
						.name {
							line-height: 44rpx;
						}

						.sub {
							display: flex;
							align-items: center;

							& image {
								width: 48rpx;
								height: 28rpx;
							}

							& text {
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.4);
								padding-left: 6rpx;
							}
						}
					}

					.icn-drop-bottom {
						width: 46rpx;
						height: 46rpx;
						margin-left: 6rpx;
					}
				}
			}

			.caption>image {
				width: 96rpx;
				height: 96rpx;
			}

			.bodys {
				padding: 16rpx 32rpx 24rpx;

				.item-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						width: 328rpx;

						.top {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF3B30;

							& text {
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.4);
							}

							& text:last-child {
								font-weight: bold;
								color: rgba(0, 0, 0, 0.6);
								padding-left: 16rpx;
							}
						}

						.box {
							width: 100%;
							height: 88rpx;
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.left {
								width: 88rpx;
								height: 100%;
								border-radius: 16rpx 0px 0px 16rpx;
								border: 2rpx solid #EE5953;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #EE5953;
								font-size: 60rpx;
							}

							.center {
								width: 152rpx;
								height: 100%;
								border-top: 2rpx solid #F4F5F7;
								border-bottom: 2rpx solid #F4F5F7;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 32rpx;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.8);
							}

							.right {
								width: 88rpx;
								height: 100%;
								border-radius: 0px 16rpx 16rpx 0px;
								border: 2rpx solid #EE5953;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #EE5953;
								font-size: 60rpx;
							}
						}

						.bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 16rpx;

							.lab-box {
								display: flex;
								align-items: center;

								.lab {
									font-size: 24rpx;
									font-weight: bold;
									color: rgba(0, 0, 0, 0.8);
								}

								.text {
									font-size: 24rpx;
									font-weight: bold;
									color: #FF3B30;
									padding-left: 8rpx;
								}
							}

							.lab-box:last-child {
								.text {
									color: #33C45B;
								}
							}
						}
					}

					.item:last-child {
						.box {
							.center {
								color: rgba(0, 0, 0, 0.4);
							}
						}

						.bottom {
							.lab-box {
								.text {
									color: rgba(0, 0, 0, 0.8);
								}
							}
						}
					}
				}

				.bottom-btns {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btns {
						width: 210rpx;
						height: 104rpx;
						background: #33C45B;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						.sup {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 44rpx;
						}

						.sub {
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}

					.btns:first-child {
						background: #FF3B30;
					}

					.btns:last-child {
						background: #356FE5;
					}
				}
			}
		}

		.order-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			// border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;

			.caption {
				height: 122rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				line-height: 114rpx;
				border-bottom: 2rpx solid #F6F7F9;
				box-sizing: border-box;

				& image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					bottom: 12rpx;
				}

				.icn-left {
					position: absolute;
					left: 32rpx;
					bottom: 32rpx;
					width: 56rpx;
					height: 56rpx;
				}
			}

			.bodys {
				padding: 32rpx 64rpx;

				.sup-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 52rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.sup {
							display: flex;
							align-items: center;

							& image {
								width: 48rpx;
								height: 48rpx;
							}

							& text {
								font-size: 24rpx;
								font-weight: bold;
								color: rgba(0, 0, 0, 0.6);
							}
						}

						.sub {
							line-height: 66rpx;
							font-size: 48rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.8);
						}
					}
				}

				.tips {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					text-align: center;
					margin-top: 40rpx;
				}

				.affirm-btn {
					margin-top: 16rpx;
					height: 88rpx;
					background: #EE5953;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	.account-modal {
		.account-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;
			padding-bottom: 24rpx;

			.caption {
				height: 120rpx;
				position: relative;
				border-bottom: 2rpx solid #F6F7F9;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					display: flex;
					align-items: center;

					& image {
						width: 64rpx;
						height: 64rpx;
					}

					.info {
						margin-left: 16rpx;

						.name {
							font-size: 32rpx;
							color: rgba(0, 0, 0, 0.8);
							line-height: 44rpx;
						}

						.sub {
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.4);
						}
					}
				}

				>image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.info-box {
				padding: 0 32rpx;
				min-height: 30vh;

				.list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 32rpx;
					height: 104rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					padding: 0 8rpx 0 32rpx;
					box-sizing: border-box;

					.left {
						display: flex;
						align-items: center;

						& image {
							width: 64rpx;
							height: 64rpx;
						}

						.info {
							margin-left: 16rpx;

							.name {
								font-size: 32rpx;
								color: rgba(0, 0, 0, 0.8);
								line-height: 44rpx;
							}

							.sub {
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.4);
							}
						}
					}

					& image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}

			.set-btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;
				margin-top: 32rpx;

				.btns {
					width: 328rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.8);
				}
			}
		}
	}


	.table-box {
		padding: 0 24rpx 24rpx;

		.tables {
			border-top: 2rpx solid #F6F7F9;

			.tr {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				padding: 24rpx 0;

				.tl {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);

					.drop {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-left: 8rpx;

						.icn-top {
							width: 0rpx;
							height: 0rpx;
							border: 8rpx solid transparent;
							border-bottom-color: #BFBFBF;
							border-bottom-width: 10rpx;
							margin-bottom: 2rpx;
						}

						.icn-bottom {
							width: 0rpx;
							height: 0rpx;
							border: 8rpx solid transparent;
							border-top-color: #BFBFBF;
							border-top-width: 10rpx;
							margin-top: 2rpx;
						}

						.icn-red {
							border-top-color: #EE5953;
						}
					}
				}

				.tl:nth-child(3) {
					padding-right: 10rpx;
				}
			}

			.box {
				.rows {
					.flex {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 24rpx 0;
						border-bottom: 2rpx solid #F6F7F9;
					}

					.tl {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);

						& image {
							width: 46rpx;
							height: 46rpx;
						}
					}

					.tl:nth-child(3) {
						color: #FF3B30;
					}

					.drop-box {
						padding: 20rpx;
						background: #F6F7F9;
						border-radius: 16rpx;

						.col {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 16rpx;

							.li {
								font-size: 28rpx;
								font-weight: bold;
								width: 35%;
								text-align: right;
							}

							.li:first-child {
								font-weight: 400;
								color: #356FE5;
								width: 30%;
								text-align: left;
							}

							.li:last-child {
								color: #FF3B30;
								width: 35%;
							}
						}

						.col:first-child {
							margin-top: 0;
						}
					}
				}

				.row:last-child {
					.flex {
						border-bottom: 0;
					}
				}
			}

			.tl:nth-child(1) {
				width: 30%;
				justify-content: flex-start;
				padding-left: 24rpx;
			}

			.tl:nth-child(2) {
				width: 35%;
				justify-content: flex-end;
			}

			.tl:nth-child(3) {
				width: 35%;
				justify-content: flex-end;
				padding-right: 24rpx;
			}
		}
	}
</style>